<!-- templates/applicant/interviewindex.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
          font-family: Arial, sans-serif;
          margin: 20px;
          background-color: #f4f4f9;
          color: #333;
      }
      .container {
          max-width: 800px;
          margin: 0 auto;
          padding: 20px;
          background-color: #fff;
          border-radius: 8px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }
      .conversation {
          margin-bottom: 20px;
          max-height: 400px;
          overflow-y: auto;
          border: 1px solid #ccc;
          padding: 10px;
          border-radius: 4px;
          background-color: #f9f9f9;
      }
      .user, .assistant {
          margin: 5px 0;
      }
      .user {
          color: #007bff;
      }
      .assistant {
          color: #28a745;
      }
      .evaluation {
          margin-top: 20px;
          padding: 10px;
          border: 1px solid #ccc;
          border-radius: 4px;
          background-color: #f9f9f9;
      }
      .input-container {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
      }
      textarea {
          width: 70%;
          padding: 10px;
          border: 1px solid #ccc;
          border-radius: 4px;
          resize: none;
          height: 100px;
      }
      button {
          padding: 10px 20px;
          background-color: #007bff;
          color: #fff;
          border: none;
          border-radius: 4px;
          cursor: pointer;
      }
      button:hover {
          background-color: #0056b3;
      }
      .evaluation-notice {
          margin-top: 20px;
          padding: 10px;
          background-color: #f8f9fa;
          border-left: 4px solid #28a745;
          color: #333;
      }
      
      .evaluation-notice p {
          margin: 0;
          font-weight: bold;
      }
    </style>
  </head>
  <body>

  <div class="container">
        <h1>AI面试官</h1>
        <div id="conversation" class="conversation"></div>


        <div class="input-container">
            <textarea id="result"></textarea>
            <button id="btn_control">开始录音</button>
            <button onclick="sendUserInput()">发送</button>
        </div>
        <div id="evaluation" class="evaluation"></div>
    </div>

    <script>
      var APPID = "3c4e1474";
      var API_KEY = "7ee110d694de56a0af762bdb9721d3de";
      let userInputText="";
    </script>
    <script src="{{ url_for('static', filename='example/hmac-sha256.js') }}"></script>
    <script src="{{ url_for('static', filename='example/HmacSHA1.js') }}"></script>
    <script src="{{ url_for('static', filename='example/md5.js') }}"></script>
    <script src="{{ url_for('static', filename='example/enc-base64-min.js') }}"></script>

    <script src="{{ url_for('static', filename='dist/index.umd.js') }}"></script>
    <script src="{{ url_for('static', filename='example/index.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <script>
        const socket = io();

        socket.on('connect', () => {console.log('Connected to server');
            startInterview('3', '1'); });

        function startInterview(resumeId, jobId) {
            socket.emit('start_interview', { resume_id: resumeId, job_id: jobId });
        }

        socket.on('new_message', (data) => {
            displayMessage(data.role, data.content);
        });

        socket.on('evaluation_report', (data) => {
            displayEvaluation(data.report);
            
            if (data.status === 'completed') {
                setTimeout(() => {
                    alert('面试已结束，即将返回主页');
                    window.location.href = '/applicant/dashboard';
                }, 3000);
            }
        });

        function displayMessage(role, content) {
            const conversationDiv = document.getElementById('conversation');
            const messageElement = document.createElement('div');
            messageElement.className = role;
            messageElement.textContent = `${role}: ${content}`;
            conversationDiv.appendChild(messageElement);
            conversationDiv.scrollTop = conversationDiv.scrollHeight;  // 自动滚动到底部
        }

        function displayEvaluation(evaluationReport) {
            const evaluationDiv = document.getElementById('evaluation');
            evaluationDiv.innerHTML = `
                <h2>面试评估报告</h2>
                <pre>${evaluationReport}</pre>
                <div class="evaluation-notice">
                    <p>面试已结束，系统正在处理评估结果...</p>
                </div>
            `;
        }

        function sendUserInput() {
            const userInput = document.getElementById('result').value;
            if (userInput.trim() === '') {
                alert('请输入你的回答');
                return;
            }
            displayMessage('user', userInput);
            socket.emit('user_input', { content: userInput });
            document.getElementById('result').value = '';  // 清空输入框
            userInputText=""

        }
    </script>
  </body>
</html>
